<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>时尚头条</title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.0/css/swiper.min.css">
    <link rel="stylesheet" type="text/css" href="../iconfonts/iconfont.css" />
    <link rel="stylesheet" href="../css/common1.css">
    <link rel="stylesheet" href="../css/fashionStar.css">

    <script src="../lib/jquery-1.11.3.min.js"></script>
    <script src="http://www.jq22.com/jquery/vue.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.0/js/swiper.min.js"></script>
    <script src="../js/api.js" type="text/javascript" charset="utf-8"></script>
    <script src="../lib/adaptive.js"></script>
    <script src="../lib/js.cookie.js"></script>
    <script src="../js/fashionStar.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>

    <header>
        <div class="logo">
            <a href="#">
                <img src="../img/logo1.jpg" alt="" srcset="" class="logo-img">
            </a>
        </div>
        <div class="search">
            <a class="iconfont icon-sousuo1"></a>
        </div>
    </header>
    <!-- headaer end -->
    <nav>
        <ul class="nav-ul swiper-pagination">
            <li>综合</li>
            <li>明星</li>
            <li>视频</li>
            <li>买手好货</li>
            <li>直播红包</li>
        </ul>

    </nav>
    <!-- nav end -->


    <section>

        <div class="swiper-container" id="swiper1">
            <div class="swiper-wrapper">
                <!-- 独家 -->
                <div class="swiper-slide" id="duJia">

                    <div class="section-top" id="s-t-lbt">

                    </div>

                    <div class="dj-cont"> </div>
                </div>

                <!-- 明星 -->
                <div class="swiper-slide" id="mingXing">
                    <div class="section-top">
                        <img src="../img/mx.jpg">
                    </div>
                    <div class="mx-cont"></div>
                </div>
                <!-- 视频 -->
                <div class="swiper-slide" id="shiPin">
                    <div class="section-top">
                        <img src="../img/sp.jpg">
                    </div>
                    <div class="sp-cont"></div>
                </div>
                <!-- 买手好物 -->
                <div class="swiper-slide" id="haoWu">
                    <div class="section-top">
                        <img src="../img/hw.jpg">
                    </div>
                    <div class="hw-cont">
                    </div>
                </div>
                <!-- 直播红包 -->
                <div class="swiper-slide" id="hongBao">
                    <div class="section-top">
                        <img src="../img/hb.jpg">
                    </div>
                    <div class="hb-cont"></div>
                </div>

            </div>
        </div>

    </section>


    <footer>
        <figure>
            <a href="#" class="iconfont icon-shouye"></a>
            <figcaption>精选</figcaption>
        </figure>
        <figure style="margin-right: 1.2rem;">
            <a href="#" class="iconfont icon-sousuo"></a>
            <figcaption>分类</figcaption>
        </figure>

        <img src="../img/hong1.jpg" style="height: 1.48rem;width: 1.48rem" />

        <figure style="margin-left: 1.2em;">
            <a href="#" class="iconfont icon-gouwuche"></a>
            <figcaption>购物车</figcaption>
        </figure>
        <figure>
            <a href="#" class="iconfont icon-wode"></a>
            <figcaption>我的</figcaption>
        </figure>
    </footer>


    <!-- <div id="footer">
	
</div> -->

    <script>
        //$('#s-t-lbt').load('djLBT.html');
        //	$('#footer').load('commonFooter.html');

        var swiper1 = new Swiper('#swiper1', {
            pagination: {
                el: '.nav-ul',
                clickable: true,
                renderBullet: function(index, className) {
                    return '<span class="' + className + '">' + '</span>';
                },
            },
        });
        $('#s-t-lbt').load('djLBT.html');


        /*  var swiper2 = new Swiper('#swiper2', {
             autoplay: true,
             pagination: {
                 el: '.swiper-pagination',
                 clickable: true,
                 renderBullet: function(index, className) {
                     return '<span class="' + className + '">' + (index + 1) + '</span>';
                 },
             },
         }); */
        /*  console.log($('.swiper-slide').eq(0).hasClass('swiper-slide-active'));*/
        fashionStar();

        $("footer img").hover(function() {
            $('footer img').prop("src", '../img/hong1.jpg');
        }, function() {
            $("footer img").prop("src", "../img/tutu.jpg");
        })
        $("footer figure").hover(function(e) {
            let time = $(this).index()
            if ($(this).index() > 2) {
                time--
            }
            $('footer figure .iconfont').eq(time).css({
                color: '#000'
            });
            $('footer figure figcaption').eq(time).css({
                color: '#000'
            });
        }, function() {
            $('footer figure .iconfont').css({
                color: '#999'
            });
            $('footer figure figcaption').css({
                color: '#999'
            });
        })
    </script>


</body>

</html>